<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <input type="text">
    <script>
        // 键盘事件 依赖于键盘行为的  
        // 所有的元素都可以绑定键盘事件 但是不代表所有的元素都能触发 键盘事件 
        // 触发键盘事件的 只能是  window document  表单元素 
        // 不考虑中文的情况 
        // keydown 键盘按下 
        // keyup  按下弹起来 
        // keypress 按住不放  普通

        var divele = document.getElementsByTagName('div')[0];

        // divele.onkeydown = function(){
        //     alert('123')
        // }  可以绑定 但是不生效 

        // window.onkeydown = function(){
        //     alert('windows')
        // }

        // document.onkeydown = function(){
        //     alert('document')
        // }

        // var inp =  document.getElementsByTagName('input')[0];
        //  inp.onkeydown = function(){
        //     alert('我是表单')
        // }

        // var inp =  document.getElementsByTagName('input')[0];
        //  inp.onkeyup = function(){
        //     alert('我是表单 按下不触发 松开触发')
        // }

        // var inp =  document.getElementsByTagName('input')[0];
        //  inp.onkeypress = function(){
        //     alert('按住不放')
        // }

        // var inp =  document.getElementsByTagName('input')[0];
        //  inp.onkeydown = function(){
        //     alert('我是回车1')
        // }

        // var inp =  document.getElementsByTagName('input')[0];
        //  inp.onkeypress = function(){
        //     alert('我是回车键2');
        //  }
        // 功能性的键 f1 keypress 不会触

         // 回车键可以触发  
    </script>
</body>
</html>